<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i> 培训管理</el-breadcrumb-item>
                <el-breadcrumb-item>会议管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <div class="fr">
                <el-select class="handle-select" size="mini" v-model="meetingtype" placeholder="请选择">
                    <el-option v-for="item in meetingtypeFilter"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                </el-select>
                <el-input placeholder="会议名称" size="mini" class="handle-input" v-model="meetingname"></el-input>
                <el-button type="primary" size="mini" icon="el-icon-search" @click="search">查询</el-button>
            </div>
            <el-button type="primary" size="mini" icon="" @click="addMeeting">添加会议</el-button>
        </div>
        <el-table :data="tableData" border style="width: 100%" size="mini">

            <el-table-column prop="meetingid" label="会议id" width="100"></el-table-column>
            <el-table-column prop="meetingname" label="会议名称" width="200"
                             :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="meetingtype" label="会议类型" width="80"></el-table-column>
            <el-table-column prop="usercost" label="用户报名价格" width="90"></el-table-column>
            <el-table-column prop="membercost" label="会员报名价格" width="100"></el-table-column>
            <el-table-column prop="meetinglink" label="会议链接" width="160"></el-table-column>
            <el-table-column prop="meetingtime" label="会议时间" width="150">
                <template slot-scope="scope">
                    <span>{{scope.row.meetingtime?$moment(scope.row.meetingtime).format('YYYY-MM-DD HH:mm:ss'):''}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="meetingcomment" label="备注信息" min-width="300"
                             :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="操作" width="400" fixed="right">
                <template slot-scope="scope">
                    <el-button @click="editMeeting(scope.$index, scope.row)"
                               size="mini">编辑
                    </el-button>
                    <el-button @click="registrationInfo(scope.$index, scope.row)"
                               size="mini">查看报名列表
                    </el-button>
                    <el-button @click="targetTo(scope.$index, scope.row)"
                               size="mini">跳转到文章
                    </el-button>
                    <el-button @click="deleteRow(scope.row.meetingid)" type="danger"
                               size="mini">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <div class="pagination" style="float: left">
            <el-pagination small
                           @current-change="handleCurrentChange" background
                           layout="total, prev, pager, next, jumper"
                           :current-page="cur_page"
                           :total="totalCount">
            </el-pagination>
        </div>
    </div>

</template>

<script>

  export default {
    data: function () {
      return {
        meetingname: '',  //查询条件
        meetingtype: '',  //查询条件
        tableData: [],
        pagerow: 10,
        cur_page: 1,
        totalCount: 0,
        meetingtypeFilter: [{
          value: '',
          label: '全部'
        }, {
          value: '会议信息',
          label: '会议信息'
        }, {
          value: '培训信息',
          label: '培训信息'
        }],
      }
    },
    created() {
      this.getallmeeting()
    },
    methods: {
      //查询
      search() {
        this.cur_page = 1;
        this.findmeeting();
      },
      addMeeting() {
        this.$router.push({path: '/meeting_add/'});
      },
      editMeeting(index, row) {
        this.$router.push({path: '/meeting_edit', query: {meetingid: row.meetingid}});
      },
      registrationInfo(index, row) {
        this.$router.push({path: '/registration_list', query: {meetingid: row.meetingid}});
      },
      targetTo(index, row) {
        //TODO 地址动态设置
        window.open("http://localhost:6108/details/" + row.meetinglink);
      },
      deleteRow(meetingid) {
        this.$confirm("确定删除此会议吗?", "提示", {type: 'warning'})
          .then(() => {
            this.$axios.post('/meeting/del', {meetingid: meetingid})
              .then((res) => {
                if (res.data.code == 0) {
                  this.getallmeeting()
                } else {
                  this.$message.error(res.data.message);
                }
              }).catch(err => {
              this.$message.error('请求服务器失败，请稍后再试！');
            })
          }).catch(() => {
          this.$message.info('已取消该删除操作!');
        })
      },
      //分页
      handleCurrentChange(val) {
        this.cur_page = val;
        this.findmeeting()
      },
      findmeeting() {
        let self = this
        let params = {
          page: self.cur_page,
          pagerow: self.pagerow,
        }
        if (self.meetingname !== '') {
          params.meetingname = self.meetingname
        }
        if (self.meetingtype !== '') {
          params.meetingtype = self.meetingtype
        }
        self.$axios.post('/meeting/getmeetingbyfilter', params)
          .then(function (response) {
            // console.log(response.data.data);
            if (response.data.code == 0) {
              self.tableData = response.data.data
              self.totalCount = response.data.rowcount
            } else {
              this.$message.error(response.data.message);
            }
          }).catch(err => {
          this.$message.error('请求服务器失败，请稍后再试！');
        })
      },
      //页面初始化
      getallmeeting() {
        let self = this
        self.$axios.post('/meeting/getmeetinglist_all', {
          page: self.cur_page,
          pagerow: self.pagerow
        }).then(function (response) {
          // console.log(response.data.data);
          if (response.data.code == 0) {
            self.tableData = response.data.data
            self.totalCount = response.data.rowcount
          } else {
            this.$message.error(response.data.message);
          }
        }).catch(err => {
          this.$message.error('请求服务器失败，请稍后再试！');
        })
      }
    }
  }
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .fr {
        float: right;
    }

    .handle-input {
        width: 200px;
        display: inline-block;
    }
</style>
